<template>
  <uni-popup ref="popup" :mask-click="false" type="center">
    <view class="update-modal">
      <view class="header">
        <image class="logo" mode="aspectFit" src="/static/images/app-icon.png" style="border-radius: 20%;"/>
        <text class="title">发现新版本</text>
        <text class="version">{{ latestVersion }}</text>
      </view>

      <scroll-view class="content" scroll-y>
        <text class="description">{{ description }}</text>
      </scroll-view>

      <view v-if="downloading" class="progress-container">
        <progress :percent="downloadProgress" active stroke-width="3"/>
        <text class="progress-text">{{ downloadProgress }}%</text>
      </view>

      <view v-if="!downloading" class="buttons">
        <button v-if="!forceUpdate" class="btn cancel" @click="handleCancel">暂不更新</button>
        <button class="btn update" @click="handleUpdate">立即更新</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import {
  _downloadLatestVersion
} from '@/service/version.js'

export default {
  name: 'UpdateModal',
  props: {
    latestVersion: {
      type: String,
      required: true
    },
    currentVersion: {
      type: String,
      required: true
    },
    description: {
      type: String,
      default: ''
    },
    forceUpdate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      downloading: false,
      downloadProgress: 0
    }
  },
  methods: {
    show() {
      this.$refs.popup.open()
    },
    hide() {
      this.$refs.popup.close()
    },
    handleCancel() {
      this.hide()
      this.$emit('cancel')
    },
    async handleUpdate() {
      this.downloading = true
      try {
        const downloadTask = uni.downloadFile({
          url: 'https://gitee.com/zhenghongjiec/intelligent-laboratory-uni-app/releases/download/' +
              this.latestVersion + '/__UNI__188C5F3__znsys.apk',
          success: (downloadResult) => {
            console.log('下载完成', downloadResult.statusCode, downloadResult.tempFilePath)

            plus.runtime.install(downloadResult.tempFilePath, {}, () => {
              console.log('安装完成')
            }, (error) => {
              console.error('安装失败', error)
            })
          },
          fail: (error) => {
            console.error("下载失败", error)
          }
        })
        downloadTask.onProgressUpdate((res) => {
          this.downloadProgress = res.progress
        });

      } catch (error) {
        uni.showToast({
          title: '下载失败，请重试',
          icon: 'none'
        })
        this.downloading = false
      }
    }
  }
}

</script>

<style lang="scss" scoped>
.update-modal {
  width: 600rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  overflow: hidden;

  .header {
    padding: 40rpx;
    text-align: center;
    background: linear-gradient(180deg, #138f87 0%, #44cdbd 100%);

    .logo {
      width: 120rpx;
      height: 120rpx;
      margin-bottom: 20rpx;
    }

    .title {
      font-size: 36rpx;
      color: #FFFFFF;
      font-weight: bold;
      display: block;
    }

    .version {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.9);
      margin-top: 10rpx;
      display: block;
    }
  }

  .content {
    padding: 40rpx;
    max-height: 600rpx;

    .description {
      font-size: 28rpx;
      color: #333;
      line-height: 1.6;
    }
  }

  .progress-container {
    padding: 0 40rpx 40rpx;

    .progress-text {
      font-size: 24rpx;
      color: #666;
      margin-top: 10rpx;
      text-align: center;
      display: block;
    }
  }

  .buttons {
    display: flex;
    padding: 0 40rpx 40rpx;

    .btn {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 40rpx;
      font-size: 30rpx;
      margin: 0 20rpx;

      &.cancel {
        background: #F5F5F5;
        color: #666;
      }

      &.update {
        background: #138f87;
        color: #FFFFFF;

        &:active {
          background: #44cdbd;
        }
      }
    }
  }
}
</style>